<template>
  <div class="style-test page-container">
    <div class="page-header">
      <h2>样式测试页面</h2>
      <p>用于测试不同屏幕尺寸下的显示效果</p>
      
      <!-- 手机模式切换 -->
      <div class="mobile-mode-toggle">
        <el-switch
          v-model="mobileMode"
          active-text="手机模式"
          inactive-text="桌面模式"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="toggleMobileMode"
        />
        <span class="mode-description">
          {{ mobileMode ? '当前为手机模式预览' : '当前为桌面模式预览' }}
        </span>
      </div>
    </div>

    <!-- 屏幕尺寸信息 -->
    <el-card>
      <template #header>
        <span>当前屏幕信息</span>
      </template>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="屏幕宽度">{{ screenWidth }}px</el-descriptions-item>
        <el-descriptions-item label="屏幕高度">{{ screenHeight }}px</el-descriptions-item>
        <el-descriptions-item label="设备类型">{{ deviceType }}</el-descriptions-item>
        <el-descriptions-item label="容器宽度">{{ containerWidth }}px</el-descriptions-item>
        <el-descriptions-item label="内容区宽度">{{ contentWidth }}px</el-descriptions-item>
        <el-descriptions-item label="侧边栏宽度">{{ sidebarWidth }}px</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- CSS 变量检测 -->
    <el-card>
      <template #header>
        <span>CSS 变量检测</span>
      </template>
      <div class="css-variables">
        <h4>VueUse Safe Area 变量:</h4>
        <ul>
          <li>--vueuse-safe-area-top: {{ safeAreaVars.top }}</li>
          <li>--vueuse-safe-area-right: {{ safeAreaVars.right }}</li>
          <li>--vueuse-safe-area-bottom: {{ safeAreaVars.bottom }}</li>
          <li>--vueuse-safe-area-left: {{ safeAreaVars.left }}</li>
        </ul>

        <h4 style="margin-top: 15px;">原生 Safe Area 变量:</h4>
        <ul>
          <li>safe-area-inset-top: {{ nativeSafeArea.top }}</li>
          <li>safe-area-inset-right: {{ nativeSafeArea.right }}</li>
          <li>safe-area-inset-bottom: {{ nativeSafeArea.bottom }}</li>
          <li>safe-area-inset-left: {{ nativeSafeArea.left }}</li>
        </ul>

        <h4 style="margin-top: 15px;">检测结果:</h4>
        <div class="detection-result">
          <p v-if="hasVueUseSafeArea" class="warning">⚠️ 检测到 VueUse Safe Area 变量</p>
          <p v-else class="success">✅ 未检测到 VueUse Safe Area 变量</p>
          <p v-if="hasNativeSafeArea" class="info">ℹ️ 设备支持原生 Safe Area</p>
          <p v-else class="info">ℹ️ 设备不支持原生 Safe Area</p>
        </div>
      </div>
    </el-card>

    <!-- 宽度测试 -->
    <el-card>
      <template #header>
        <span>宽度测试</span>
      </template>
      <div class="width-test">
        <div class="test-bar" style="background: #409eff; height: 20px; margin-bottom: 10px;">
          <span style="color: white; padding: 0 10px;">100% 宽度测试条</span>
        </div>
        <div class="test-bar" style="background: #67c23a; height: 20px; margin-bottom: 10px; width: 880px;">
          <span style="color: white; padding: 0 10px;">880px 固定宽度测试条</span>
        </div>
        <div class="test-bar" style="background: #e6a23c; height: 20px; margin-bottom: 10px; width: 1200px;">
          <span style="color: white; padding: 0 10px;">1200px 固定宽度测试条</span>
        </div>
        <div class="test-bar" style="background: #f56c6c; height: 20px; margin-bottom: 10px; width: 1024px;">
          <span style="color: white; padding: 0 10px;">1024px 固定宽度测试条</span>
        </div>
        <div class="test-bar" style="background: #909399; height: 20px; margin-bottom: 10px; width: 1280px;">
          <span style="color: white; padding: 0 10px;">1280px 固定宽度测试条</span>
        </div>
        <div class="test-bar" style="background: #f56c6c; height: 20px; margin-bottom: 10px; width: 1600px;">
          <span style="color: white; padding: 0 10px;">1600px 固定宽度测试条</span>
        </div>
      </div>
    </el-card>

    <!-- 网格布局测试 -->
    <el-card>
      <template #header>
        <span>网格布局测试</span>
      </template>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" v-for="i in 6" :key="i">
          <div class="grid-item">
            <h4>列 {{ i }}</h4>
            <p>xs:24 sm:12 md:8 lg:6 xl:4</p>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 表格测试 -->
    <el-card>
      <template #header>
        <span>表格响应式测试</span>
      </template>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="名称" min-width="120" />
        <el-table-column prop="description" label="描述" min-width="200" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status === '正常' ? 'success' : 'warning'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template #default>
            <el-button size="small" type="primary">编辑</el-button>
            <el-button size="small" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 表单测试 -->
    <el-card>
      <template #header>
        <span>表单响应式测试</span>
      </template>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8">
          <el-form label-width="80px">
            <el-form-item label="姓名">
              <el-input placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input placeholder="请输入邮箱" />
            </el-form-item>
            <el-form-item label="状态">
              <el-select placeholder="请选择状态" style="width: 100%">
                <el-option label="正常" value="normal" />
                <el-option label="禁用" value="disabled" />
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :xs="24" :sm="12" :md="16">
          <el-form label-width="80px">
            <el-form-item label="描述">
              <el-input type="textarea" :rows="6" placeholder="请输入描述" />
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>

    <!-- 按钮测试 -->
    <el-card>
      <template #header>
        <span>按钮测试</span>
      </template>
      <div class="button-group">
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
        <el-button type="info">信息按钮</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'

const screenWidth = ref(window.innerWidth)
const screenHeight = ref(window.innerHeight)
const containerWidth = ref(0)
const contentWidth = ref(0)
const sidebarWidth = ref(0)

// 手机模式切换
const mobileMode = ref(false)

// CSS 变量检测
const safeAreaVars = ref({
  top: '',
  right: '',
  bottom: '',
  left: ''
})

const nativeSafeArea = ref({
  top: '',
  right: '',
  bottom: '',
  left: ''
})

const hasVueUseSafeArea = computed(() => {
  return Object.values(safeAreaVars.value).some(val => val && val !== '0px')
})

const hasNativeSafeArea = computed(() => {
  return Object.values(nativeSafeArea.value).some(val => val && val !== '0px')
})

const deviceType = computed(() => {
  if (screenWidth.value < 480) return '手机'
  if (screenWidth.value < 768) return '小平板'
  if (screenWidth.value < 1024) return '平板'
  if (screenWidth.value < 1200) return '小桌面'
  return '桌面'
})

const tableData = [
  { id: 1, name: '测试项目1', description: '这是一个测试项目的描述信息', status: '正常' },
  { id: 2, name: '测试项目2', description: '这是另一个测试项目的描述信息', status: '异常' },
  { id: 3, name: '测试项目3', description: '这是第三个测试项目的描述信息', status: '正常' },
]

const updateScreenSize = () => {
  screenWidth.value = window.innerWidth
  screenHeight.value = window.innerHeight

  // 获取容器宽度
  const container = document.querySelector('.page-container')
  if (container) {
    containerWidth.value = container.clientWidth
  }

  // 获取内容区宽度
  const content = document.querySelector('.main-content')
  if (content) {
    contentWidth.value = content.clientWidth
  }

  // 获取侧边栏宽度
  const sidebar = document.querySelector('.sidebar')
  if (sidebar) {
    sidebarWidth.value = sidebar.clientWidth
  }
}

// 切换手机模式
const toggleMobileMode = (value: boolean) => {
  const body = document.body
  const container = document.querySelector('.style-test')
  
  if (value) {
    // 开启手机模式
    body.classList.add('mobile-preview-mode')
    if (container) {
      container.classList.add('mobile-preview')
    }
    // 模拟手机屏幕尺寸
    screenWidth.value = 375
    screenHeight.value = 667
  } else {
    // 关闭手机模式
    body.classList.remove('mobile-preview-mode')
    if (container) {
      container.classList.remove('mobile-preview')
    }
    // 恢复实际屏幕尺寸
    updateScreenSize()
  }
}

onMounted(() => {
  window.addEventListener('resize', updateScreenSize)
  updateScreenSize()
  
  // 检测CSS变量
  const computedStyle = getComputedStyle(document.documentElement)
  
  // VueUse Safe Area 变量
  safeAreaVars.value = {
    top: computedStyle.getPropertyValue('--vueuse-safe-area-top').trim(),
    right: computedStyle.getPropertyValue('--vueuse-safe-area-right').trim(),
    bottom: computedStyle.getPropertyValue('--vueuse-safe-area-bottom').trim(),
    left: computedStyle.getPropertyValue('--vueuse-safe-area-left').trim()
  }
  
  // 原生 Safe Area 变量
  nativeSafeArea.value = {
    top: computedStyle.getPropertyValue('safe-area-inset-top').trim(),
    right: computedStyle.getPropertyValue('safe-area-inset-right').trim(),
    bottom: computedStyle.getPropertyValue('safe-area-inset-bottom').trim(),
    left: computedStyle.getPropertyValue('safe-area-inset-left').trim()
  }
})

onUnmounted(() => {
  window.removeEventListener('resize', updateScreenSize)
  // 清理手机模式样式
  document.body.classList.remove('mobile-preview-mode')
  const container = document.querySelector('.style-test')
  if (container) {
    container.classList.remove('mobile-preview')
  }
})
</script>

<style scoped>
.style-test {
  width: 100%;
}

.grid-item {
  background: #f0f9ff;
  border: 1px solid #e0e7ff;
  padding: 20px;
  text-align: center;
  border-radius: 4px;
  margin-bottom: 10px;
}

.grid-item h4 {
  margin: 0 0 10px 0;
  color: #1e40af;
}

.grid-item p {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
}

.button-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .button-group {
    flex-direction: column;
  }
  
  .button-group .el-button {
    width: 100%;
  }
}

.width-test {
  overflow-x: auto;
}

.test-bar {
  min-width: 200px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.mobile-mode-toggle {
  margin-top: 15px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  display: flex;
  align-items: center;
  gap: 15px;
}

.mode-description {
  color: #6c757d;
  font-size: 14px;
}

/* 手机模式预览样式 */
:global(.mobile-preview-mode) {
  overflow-x: auto;
}

.mobile-preview {
  max-width: 375px;
  margin: 0 auto;
  border: 2px solid #007bff;
  border-radius: 20px;
  padding: 10px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  position: relative;
}

.mobile-preview::before {
  content: '📱 手机模式预览 (375px)';
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: #007bff;
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  white-space: nowrap;
}

/* 手机模式下的响应式调整 */
.mobile-preview .el-card {
  margin-bottom: 15px;
}

.mobile-preview .el-descriptions {
  font-size: 12px;
}

.mobile-preview .button-group {
  flex-direction: column;
}

.mobile-preview .button-group .el-button {
  width: 100%;
  margin-bottom: 8px;
}

.mobile-preview .width-test {
  overflow-x: auto;
}

.mobile-preview .test-bar {
  font-size: 12px;
}

.css-variables {
  font-size: 14px;
}

.css-variables ul {
  margin: 10px 0;
  padding-left: 20px;
}

.css-variables li {
  margin: 5px 0;
  font-family: monospace;
  background: #f8f9fa;
  padding: 2px 6px;
  border-radius: 3px;
}

.detection-result p {
  margin: 8px 0;
  padding: 8px 12px;
  border-radius: 4px;
}

.detection-result .warning {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
}

.detection-result .success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.detection-result .info {
  background: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
}
</style>
